import style from "./App.module.scss";
import { useEffect } from "react";
import { getIndexData } from "./Api";
import { Routes, Route, useNavigate, Navigate } from "react-router-dom";
// 底部导航
import { useState } from "react";
import { Badge, TabBar } from "antd-mobile";
import Index from "./view/Index";
import Book from "./view/Book";
import Story from "./view/Story";
import Mine from "./view/Mine";
import {
  AppOutline,
  UserOutline,
  ContentOutline,
  FileOutline,
} from "antd-mobile-icons";
import AllSort from "./view/AllSort";
export default () => {
  //通过js控制页面跳转  类似Vue中$router
  let Navigate = useNavigate(); //得到跳转方法

  const tabs = [
    {
      key: "/",
      title: "找绘本",
      icon: <ContentOutline />,
      badge: Badge.dot,
    },
    {
      key: "/book",
      title: "找书单",
      icon: <FileOutline />,
      badge: "5",
    },
    {
      key: "/story",
      title: "讲故事",
      icon: <AppOutline />,
      badge: "99+",
    },
    {
      key: "/mine",
      title: "我",
      icon: <UserOutline />,
    },
  ];
  return (
    <div>
      <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/book" element={<Book />} />
        <Route path="/story" element={<Story />} />
        <Route path="/mine" element={<Mine />} />
        <Route path="/allSort" element={<AllSort />} />
        {/* 重定向 */}
        <Route path="/index" element={<Navigate to="/" />} />
      </Routes>
      <div className={style.footer}>
        <TabBar
          onChange={(a) => {
            // console.log(a);
            Navigate(a);
          }}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};
